<template>
  <h1>文本相关指令</h1>
  <!--2.3 插值指令 此写法表示将此处显示的文本进行绑定 修改变量值 页面文本立即随之改变-->
  {{info}}
  <!--2.3 且该指令可以嵌入标签中-->
  <p>{{info}}</p>
  <h3>{{info}}</h3>
  <h1>{{info}}</h1>
  <!--2.3 响应式变量的值可以进行拼接显示-->
  <h1>{{info+'_响应式变量拼接文本'}}</h1>
  <!--
    2.3 响应式变量实际上是一种简写形式 原生形式如下
        v: vue
        -text: 表示普通文本指令 任何内容都会被当作普通文本显示
        -html: 表示带有解析标签效果的文本指令 即html语言中的标签内容会被识别并生效显示
  -->
  <p v-text="info"></p>
  <p v-html="info"></p>
  <!--
    2.4 将按钮绑定点击事件
        注意 绑定属性的书写格式为 @click=""
  -->
  <button @click="f()">解析标签按钮</button>
</template>

<script setup>
// 2.2 当声明一个响应式变量时 此段代码会自动引入
import {ref} from "vue";
// 1.编写变量时 下述方式依旧生效
let a = 1;
var b = 2;
const c = 3;
console.log(a, b, c);

// 2.1 引入新型变量: 响应式变量 必须用`const`声明
const info = ref('`响应式变量文本`');

//
const f = () => {// 箭头函数 (参数列表) => {方法体}
  info.value = '值<b>更新</b>了'// 在JS操作响应式变量的值时 必须使用 变量名.value 的形式
}
</script>

<style scoped>

</style>